page {
  background-color: #23262D;
}

.header {
  width: 100%;
  background-color: #33363D;
}

.header-center {
  width: calc(100% - 60rpx);
  height: 88rpx;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .location {
    width: 120rpx;
    display: flex;
    justify-content: space-between;

    .city {
      opacity: 0.78;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #DFDFDF;
      width: 85rpx;
      line-height: 88rpx;
    }

    image {
      width: 26rpx;
      height: 14rpx;
      margin-top: 37rpx;
    }
  }

  .head-title {
    width: 518rpx;
    height: 88rpx;
    margin-left: 200rpx;
    line-height: 88rpx;
    font-family: PingFangSC-Medium;
    font-size: 36rpx;
    color: #FFFFFF;
  }

  .date image {
    width: 38rpx;
    height: 38rpx;
    margin-top: 25rpx;
  }
}

.address {
  width: 100%;
  height: 60rpx;
  margin-top: 16rpx;
  background-color: #2C2F36;

  .addr-center {
    width: calc(100% - 60rpx);
    margin: 0 auto;
    display: flex;

    image {
      width: 26rpx;
      height: 32rpx;
      margin-top: 14rpx;
      margin-right: 25rpx;
    }

    .addr-info {
      opacity: 0.59;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;
      line-height: 60rpx;
      color: #FFFFFF;
    }
  }
}

.cinema-list {
  width: 100%;
  margin-top: 16rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  .cinema {
    width: calc(100% - 60rpx);
    background-color: #2C2F36;
    height: 292rpx;
    margin-bottom: 14rpx;
    border-radius: 26rpx;
    padding: 18rpx 26rpx 27rpx 22rpx;
    box-sizing: border-box;

    .cinema-name {
      display: flex;
      justify-content: space-between;

      .name {
        width: 500rpx;
        height: 40rpx;
        font-family: PingFangSC-Medium;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price {
        font-family: PingFangSC-Medium;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #FBC34A;

        span {
          font-family: PingFangSC-Regular;
          font-size: 24rpx;
          margin-top: 4rpx;
          color: #B6B7B8;
          line-height: 40rpx;
        }
      }
    }

    .cinema-address {
      margin-top: 6rpx;
      margin-bottom: 3rpx;
      height: 33rpx;
      display: flex;
      justify-content: space-between;

      .address-info {
        width: 500rpx;
        opacity: 0.76;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 33rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .distance {
        opacity: 0.59;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }

    .cinema-info {
      display: flex;
      margin-top: 18rpx;

      .card {
        width: 36rpx;
        height: 38rpx;
        margin-right: 18rpx;
        border-radius: 10rpx;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        line-height: 38rpx;
        text-align: center;
        color: #DFDFDF;
      }

      .info-para {
        width: 452rpx;
        opacity: 0.59;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        line-height: 38rpx;
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .discount {
        background-image: linear-gradient(135deg, #EB6E75 0%, #F7A653 100%);
      }

      .sale {
        background-image: linear-gradient(135deg, #B0469D 0%, #6148AA 100%);
      }

      .vip {
        background-image: linear-gradient(135deg, #322495 0%, #3138AC 100%);
      }
    }
  }
}